<template>
  <div class="asdasd ">
    <div class="step_">
      <el-steps :active="1">
        <el-step title="步骤 1" description="添加商品基本信息"></el-step>
        <el-step title="步骤 2" description="添加商品参数"></el-step>
        <el-step title="步骤 2" description="添加商品介绍"></el-step>
        <el-step title="步骤 3" description="添加商品图片"></el-step>
      </el-steps>
    </div>
    <div class="page_goodsAdd aut">

      <el-form :model="goodsAdd" ref="goodsAdd" label-width="150px" class="demo-goodsAdd">
        <el-row>
          <el-col :span="12">
            <div class="grid-content bg-purple">
              <el-form-item label="商品名称" prop="goods_name"
                            :rules="[{required: true, message: '商品名不能为空', trigger: 'blur'}]">
                <el-input v-model="goodsAdd.goods_name" class='input_white'></el-input>
              </el-form-item>
              <el-form-item label="价格" prop="goods_price"
                            :rules="[{required: true, message: '价格不能为空', trigger: 'blur'}]">
                <el-input type="number" v-model="goodsAdd.goods_price" class='input_white'></el-input>
              </el-form-item>
              <el-form-item label="库存" prop="goods_dstock"
                            :rules="[{required: true, message: '库存不能为空', trigger: 'blur'}]">
                <el-input type="number" v-model="goodsAdd.goods_dstock" class='input_white'></el-input>
              </el-form-item>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="grid-content bg-purple-light">
              <el-form-item label="编号" prop="number" :rules="[{required: true, message: '编号不能为空', trigger: 'blur'}]">
                <el-input v-model="goodsAdd.number" type="number" class='input_white'></el-input>
              </el-form-item>
              <el-form-item label="排序" prop="goodssort" :rules="[{required: true, message: '排序不能为空', trigger: 'blur'}]">
                <el-input type="number" v-model="goodsAdd.goodssort" class='input_white'></el-input>
              </el-form-item>
              <el-form-item label="商品分类" prop="classvalue"
                            :rules="[{required: true, message: '商品分类不能为空', trigger: 'blur'}]">
                <el-select v-model="classvalue" placeholder="请选择">
                  <el-option
                    v-for="item in options"
                    :key="item.id"
                    :label="item.class_name"
                    :value="item.id">
                  </el-option>
                </el-select>
              </el-form-item>

            </div>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <div class="ing_">
      <el-button type="primary" class="but_sub" @click="submitForm" v-if="goodssubmit == true">提交</el-button>
      <el-button class="but_sub lef_t" @click="resetForm" v-if="goodssubmit == false">下一步</el-button>

      <el-button class="but_sub lef_t" @click="resetFormNext" v-if="etcli == true">下一步</el-button>
      <el-button class="" type="danger" style="float: right" @click="updateuvergoods" v-if="etcli == true">退出</el-button>
    </div>
  </div>
</template>
<script>


  import {
    mapGetters
  } from 'vuex'
  export default {

    components: {mapGetters},
    data() {
      //密码验证
      return {
        goodsAdd: {
          goods_name: '', //商品名称 1
          goods_price: '', //商品价格 1
          goods_dstock: '', //商品库存 1
          number: '',//商品编号
          goodssort: '',//排序
        },
        classvalue: '',
        options: [],
        goodssubmit: true,
        etcli:false,
      }
    },

    methods: {
      submitForm(){//提交
//        let content = this.$refs.ue.getUEContent(); // 调用子组件方法
        var api_ = '';
        var datall = {};
        if (this.seegoods != 0) {
          api_ = 'editGoods';
          datall = [{
            "id": this.Obtaingoodsflag,
            "goods_name": this.goodsAdd.goods_name,
            "class_id": this.classvalue,
            "price": this.goodsAdd.goods_price,
            "stock": this.goodsAdd.goods_dstock,
            "number": this.goodsAdd.number,
            "sort": this.goodsAdd.goodssort,
          }];
          this.goodssubmit = true;
        } else {
          api_ = 'creategoods';
          datall = {
            "goods_name": this.goodsAdd.goods_name,
            "class_id": this.classvalue,
            "price": this.goodsAdd.goods_price,
            "stock": this.goodsAdd.goods_dstock,
            "number": this.goodsAdd.number,
            "sort": this.goodsAdd.goodssort,
            "introduce": 'x',
            "parameter": 'x',
          };
          this.goodssubmit = false;
        }
        this.http.post({
          'api': api_,
          'data': {
            'data': datall,
          }
        }).then((res) => {
          if (res.data.status_code == 200) {
            this.$h.dataSuccess(res.data,this);
            if(this.seegoods.length == 0 ){
              this.$store.commit('goodsflag', res.data.data.id);
            }



          }
        }, (err) => {
          this.$h.Ed(err,this);
        });
      },
      resetForm(){  //下一步
        this.$router.push('./addgoogsparameter');
        this.goodssubmit = true;

      },
      resetFormNext(){  //下一步 next
        this.$router.push('./Updategoogsparameter');
        this.goodssubmit = true;

      },
      updateuvergoods(){ //修改结束
        this.$store.commit('goodsflag', 0);
        this.$store.commit('Deposit', []);
        this.$router.push('./mygoods');
      },
      bodyaudh() { //获取分类
        this.http.post({
          'api': 'getgoodsclass',
          'data': {
            'data': {
              "level": 2,
            }
          }
        }).then((res) => {
          if (res.data.status_code == 200) {
//            console.log(res.data);
            this.options = res.data.data
          }
        }, (err) => {
          if (err) {
            this.$h.Ed(err,this);
          }
        })
      },
    },

    //提交按钮
    watch: {},
    computed: {
      ...mapGetters([
        'Obtaingoodsflag',
        'seegoods'
      ]),
    },

    mounted() {
      this.bodyaudh();
//      console.log(this.seegoods)
      if(this.seegoods.length != 0 ){
          this.etcli = true;
//          console.log(this.seegoods)
        this.goodsAdd.goods_name = this.seegoods.goods_name;
        this.goodsAdd.goods_price = this.seegoods.price;
        this.goodsAdd.goods_dstock = this.seegoods.stock;
        this.goodsAdd.number = this.seegoods.number;
        this.goodsAdd.goodssort = this.seegoods.sort;
        this.classvalue = this.seegoods.class_id;
      }


    }


  }
</script>
<style scoped>
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }

  .mon_qiang {
    width: 350px;
  }

  .ing_ {
    width: 50%;
    margin: auto;
    padding-top: 10%;
  }

  .but_sub {
    width: 150px;
    margin: auto;
  }

  .el_img {
    width: 200;
    height: 400px;
    border: 1px solid gray;
    display: block;
  }

  .from_ing {
    width: 50%;
    margin: auto;
    height: 500px;
    /*border:1px solid gray;*/
  }

  .avatar-uploader .el-upload:hover {
    border-color: #20a0ff;
  }

  .input_white {
    width: 250px;
    /*margin-left: 5px;*/
    float: left
  }

  .input_white_c {
    width: 90px;
    margin-left: 5px;
    float: left
  }

  .lef_t {
    margin-left: 40px;
  }

  .step_ {
    width: 70%;
    height: 75px;
  }

  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }

  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }

  .page_goodsAdd {
    width: 100%;
    height: 100%;
    margin-top: 10%;

  }

  .aut {
    /*margin: auto*/
  }

  .goods_add_left {
    width: 293px;
    float: left;
  }

  .goods_add_right {
    width: 293px;
    float: left;
    margin-left: 20%
  }

  .butt {
    margin-left: 50px;
  }

  .text_val {
    width: 350px;
    height: 200px;
  }
</style>
